[Vue2]使用semantic modal 遇到 at HTMLDivElement.invoker

發表於 更新於 分類於

我用的用法有點特別，算是硬改的所以引爆了一顆地雷，但是亂搞又自己救回來了XD

首先我們知道正常的方式是可行的：

1
2
3
4
5
6
<div id="clickme" @click="openModal">
    click me!
</div>
<div id="modal_signin" class="ui basic modal">
    Show modal
</div>
1
2
3
4
5
6
7
8
new Vue({
    el: '#clickme',
    methods: {
        openModal () {
             $('#modal_signin').modal('show');
        }
    }
});

錯誤fns.apply is not a function at HTMLDivElement.invoker

因某些因素所以我用的方法很奇耙，大概類似這樣：

1
2
3
<div id="clickme" @click="test">
    click me!
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var obj = {
    el: '#clickme',
    data: {
        openModal: 'openModal'
        //注意一下這個data名稱，與第二個錯誤有關
    },
    methods {
        openModal () {
             $('#modal_signin').modal('show');
        }
    }
}
var temp =
    '\<div>'+
        '\<div id="clickme" @click="openModal">'+
            'click me!'+
        '\</div>'+
        '\<div id="modal_signin" class="ui basic modal">'+
            'Show modal'+
        '\</div>'+
    '\</div>'

obj.template = temp;

new Vue(obj);

此時如果click則會報fns.apply is not a function at HTMLDivElement.invoker

錯誤openModal is not a function at click at HTMLDivElement.invoker

照著上面的範例，如果我把click改成@click="openModal()"則會報這個錯誤，但其實是method的名稱不能跟data的變數名稱重複，我也不知道發生了什麼事，總之趕快把問題紀錄下來～

最後解決方法

所以上面的代碼完全不動複製下來，只要改動一下：

1
2
3
<div id="clickme" @click="test">
    click me!
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var obj = {
    el: '#clickme',
    data: {
        openModal: 'openModal'
        //注意一下這個data名稱，與第二個錯誤有關
    },
    methods {
        PleaseOpenModal () {
             $('#modal_signin').modal('show');
        }
    }
}
var temp =
    '\<div>'+
        '\<div id="clickme" @click="PleaseOpenModal">'+
            'click me!'+
        '\</div>'+
        '\<div id="modal_signin" class="ui basic modal">'+
            'Show modal'+
        '\</div>'+
    '\</div>'

obj.template = temp;

new Vue(obj);

應該就行摟！